<template>
  <div class="markdowns">
    <el-input placeholder="请输入文章标题" size="medium " v-model="inputTitle"></el-input>
    <mavon-editor v-model="MDvalue" :toolbars="toolbars" @change="getHTML" class="asd"/>
    <div class="bottom">
       <div class="bottom-top">
         <div>
           <span class="colors">
            是否原创
          </span>
          <span>
            <el-select v-model="yuanchuang" placeholder="请选择" size="medium">
                <el-option
                  v-for="item in list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </span>
          <span class="colors">类型选择：</span>
          <span>
            <el-select v-model="type" placeholder="请选择" size="medium">
              <el-option
                v-for="item in typelist"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </span>
         </div>

          <div>
            <!-- 选项卡 -->
            <el-tag
              :key="tag"
              class="tags"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              size="medium"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="mini"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ 添加标签</el-button>
            <!-- /选项卡 -->
          </div>

       </div>

       <div class="bottom-bottom">
         <div class="bottom-bottom-left">
           <ul>
            <li>
              <span>是否开启赞赏</span>
              <span>
                <el-checkbox v-model="ifadmire"></el-checkbox>
              </span>
            </li>
            <li>
              <span>是否有转载声明</span>
              <span>
                <el-checkbox v-model="ifstatement"></el-checkbox>
              </span>
            </li>
            <li>
              <span>是否接收评论</span>
              <span>
                <el-checkbox v-model="ifcomment"></el-checkbox>
              </span>
            </li>
          </ul>
         </div>

         <div class="bottom-bottom-right">
           <el-button type="primary" @click="btnFunc" > 发布 </el-button>
           <el-button type="primary" :disabled="false"> 保存为草稿 </el-button>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
import { WritingmyblogAPI } from '../../../api/blogone'
import { getTypeListAPI } from '../../../api/recommendone'

export default {
  data () {
    return {
      type: '',
      typelist: [],
      inputValue: '',
      inputVisible: false,
      dynamicTags: [],
      inputTitle: '',
      MDvalue: '',
      yuanchuang: '',
      HTMLMD: '',
      NOHTMLMD: '',
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: false, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
      list:[{
        value: '原创',
        label: '原创'
      },
      {
        value: '转载',
        label: '转载'
      }],
      ifadmire: true,
      ifstatement: true,
      ifcomment: true
    }
  },
  methods: {
    async gettypelist () {
      const res = await getTypeListAPI()
      this.typelist = res.data.data
    },
    getHTML(value, render) {
      this.HTMLMD = render
      this.NOHTMLMD = render.replace(/<(?!img).*?>/g, "")
      if (render.length > 0) {
        this.$store.commit('updateisMDnull', false)
      } else {
        this.$store.commit('updateisMDnull', true)
      }
    },
    handleClose(tag) {
      
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        if (this.dynamicTags.length < 3) {
          this.dynamicTags.push(inputValue);
        } else {
          this.$message({
            type: 'info',
            message: '不可以超过三个标签'
          });
        }
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    async xieblogAPI() {
      const res = await WritingmyblogAPI({
        title: this.inputTitle,
        content: this.NOHTMLMD,
        htmlContent: this.HTMLMD,
        mdContent: this.MDvalue,
        flag: this.yuanchuang,
        appreciation:this.ifadmire,
        shareStatement: this.ifstatement,
        commentable: this.ifcomment,
        typeName: this.type,
        userId: JSON.parse(window.localStorage.getItem('user')).id
      })

      this.$message({
        type: 'success',
        message: res.data.msg
      });

      this.$router.push({name: 'my'})
    },
    btnFunc() {
      if(this.NOHTMLMD !== '' && this.inputTitle !== '') {
        this.xieblogAPI()
      } else {
        this.$message({
          type: 'error',
          message: '请填写内容后发布'
        });
      }
    }
  },
  mounted() {
    this.gettypelist()
  }
}
</script>

<style lang="scss" scoped>
.markdowns{
  // background-image: url('../../../assets/123.png');
  // background-size: cover;
  background-color: rgb(49, 68, 104);
  height: 100vh;
  width: 100vw;
}
.asd {
  min-width: 1250px;
  height: 80vh;
  width: 100vw;
}

.bottom{
  min-width: 1250px;
  .bottom-top{
    margin-top: 25px;
  }
  padding: 0 30px;
  .bottom-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .bottom-bottom-left{
      ul{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        gap: 30px;
        color: skyblue;
        font-weight: 600;
        font-size: 20px;
      }
    }
  }
}
.colors{
  color: skyblue;
  font-weight: 600;
  font-size: 20px;
}
.bottom-top{
  gap: 20px;
  display: flex;
  align-items: center;
}
.tags{
  margin-left: 15px;
}
.button-new-tag{
  margin-left: 15px;
}
.input-new-tag{
  width: 100px;
  margin-left: 15px;
}
</style>